CSS Quiz — Answers + Why

Each option shows whether it’s correct and a short reason.

Q1Which property is used to create space inside an element, between the content and the border?

margin ❌
Margin is outside the border.
padding ✅
Correct: padding adds inner spacing between content and border.
border ❌
Border surrounds the padding/content.
spacing ❌
Not a valid CSS property.

Q2What is the purpose of calc() in CSS?

To perform mathematical calculations ✅
Correct: calc() lets you combine units (e.g. width: calc(100% - 50px)).
To define CSS animations ❌
Animations use @keyframes + animation properties.
To set conditional styles ❌
Conditional styles use media queries.
To apply media queries ❌
Media queries use @media.

Q3What does CSS stand for?

Custom Style Sheets ❌
Colorful Style Sheets ❌
Computer Style Sheets ❌
Cascading Style Sheets ✅
Correct: CSS = Cascading Style Sheets.

Q4How do you add a comment in a CSS file?

/* this is a comment */ ✅
Correct syntax for CSS comments.
// this is a comment ❌
JavaScript style, not valid in CSS.
❌
That’s HTML comment syntax.
// this is a comment // ❌
Also JS style.

Q5Which unit is relative to the root element’s font size?

em ❌
Relative to parent element’s font size.
px ❌
Pixels are absolute units.
% ❌
Relative to parent element size.
rem ✅
Correct: rem = “root em”.

Q6Which CSS property is used to prevent an element from overflowing its container?

display: none; ❌
Removes the element entirely, not just overflow.
overflow: hidden; ✅
Correct: hides overflowing content outside the box.
visibility: collapse; ❌
Applies only to table rows/columns, not general overflow.
clip: content-box; ❌
Not valid syntax for overflow control.

Q7What is the correct syntax for importing a stylesheet in CSS?

@import url(css/example.css); ✅
Correct syntax to import styles.
@import-stylesheet url(css/example.css); ❌
Not a valid CSS keyword.
import-css url(css/example.css); ❌
Invalid property.
@import-style url(css/example.css); ❌
Not valid CSS syntax.

Q8How do you add a background color for all <h1> elements?

h1.all ❌
Selects h1 with class "all".
all.h1 ❌
Invalid selector.
h1 {background-color:#FFFFFF;} ✅
Correct: targets all h1 elements.
*h1 ❌
Invalid syntax.

Q9Which CSS property is used to make text bold?

font-style: bold; ❌
Font-style is italic, not bold.
font-weight: bold; ✅
Correct: makes text bold.
text-align: bold; ❌
Text-align controls alignment.
font: bold; ❌
Incomplete shorthand; needs more values.

Q10How do you make an element's text uppercase?

text-case: uppercase; ❌
No such property.
text-transform: uppercase; ✅
Correct property for uppercase transformation.
font-case: uppercase; ❌
Not valid CSS.
letter-case: uppercase; ❌
Not valid CSS.

Q11What is the default value of box-sizing?

content-box ✅
Default: width/height exclude padding & border.
border-box ❌
Commonly set, but not default.
padding-box ❌
Not a valid value.
inherit ❌
Copies parent’s value if set.

Q12Padding shorthand: 10px top, 15px bottom, 5px right, 10px left?

padding: 10px 15px 5px 10px; ❌
Wrong order (top, right, bottom, left).
padding: 15px 5px 10px 10px; ❌
padding: 10px 5px 10px 15px; ❌
padding: 10px 5px 15px 10px; ✅
Correct order: top, right, bottom, left.

Q13How do you create a CSS animation that loops infinitely?

animation: spin 2s infinite; ✅
Correct: “infinite” keyword repeats forever.
animation: spin 2s loop; ❌
animation: spin 2s forever; ❌
animation: spin 2s repeat; ❌

Q14How do you apply a CSS rule to all <p> elements inside a <div>?

div > p ❌
Selects only direct children.
div p ✅
Correct: selects all descendant paragraphs.
div + p ❌
Selects adjacent sibling only.
div, p ❌
Applies separately to all divs and ps.

Q15Which snippet centers a website horizontally?

site-align: center; ❌
margin: center; ❌
margin: auto 0; ❌
margin: 0 auto; ✅
Correct: horizontally centers block elements.

Q16If you want flex items to wrap to the next line?

flex-wrap: wrap; ✅
Correct: allows wrapping when space runs out.
display: wrap; ❌
flex-direction: row; ❌
align-items: wrap; ❌

Q17Which is the correct CSS syntax?

{p:color=black(p} ❌
p {color: black;} ✅
Correct syntax: selector { property: value; }
{p;color:black} ❌
p:color=black ❌

Q18What does the z-index property control?

The stacking order of elements ✅
Correct: higher z-index appears on top.
The visibility ❌
The background color ❌
The transition speed ❌

Q19How do you declare a CSS variable?

$main-color: blue; ❌
That’s SCSS syntax.
var --main-color: blue; ❌
--main-color: blue; ❌
Needs a scope (like :root).
:root { --main-color: blue; } ✅
Correct way to declare custom property.

Q20Which CSS property allows an element to align itself within a flex container?

align-items ❌
Aligns all children, not a single element.
justify-content ❌
Controls main axis spacing for all items.
align-self ✅
Correct: overrides alignment for one flex item.
flex-align ❌
Not a real property.